<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="18" /></span>
    <strong>{{ $t("language.bonus.name") }}</strong>
    <span @click="$openPage('/kefu')"><img src="@/assets/img/kefu.png" alt="" /></span>
  </header>
  <main>
  
    <dl v-if="bonus.length!=0"  v-infinite-scroll="initData" :infinite-scroll-immediate="false" infinite-scroll-distance=200>
      <dd 
        v-for="(item, index) in bonus" :key="index">
        <h3>{{ $t("language.bonus.title") }}</h3>
        <strong>{{ $dot(item.balanceBonus) }} BRL</strong>
        <span>{{ $t("language.bonus.transform") }} BRL {{ $dot(item.validBets) }}</span>
        <van-progress :percentage="parseInt(item.current) / parseInt(item.target) * 100" pivot-text=""
          track-color="#fff" stroke-width="15" pivot-color="#000" />
        <div>
          <i>{{ $t("language.bonus.starttime") }}</i><i>{{ $t("language.bonus.endtime") }}</i>
        </div>
        <div>
          <span>{{ item.accessDate }}</span><span>{{ item.expireDate }}</span>
        </div>
      </dd>
    </dl>
    <div class="nodata" v-else>
      <img src="@/assets/img/bg2.png" alt="" />
      <p>{{ $t("language.rechange.tips") }}</p>
    </div>
  </main>
</template>
<script setup lang="ts">
// const { proxy } = getCurrentInstance();
import { reactive, nextTick, getCurrentInstance, onActivated } from "vue";
const { proxy } = getCurrentInstance();
let info = JSON.parse(localStorage.getItem("info"));

let bonusForm = reactive({
  id: info.gameID,
  pageIndex: 1,
  pageSize: 10,
});
let bonus = reactive([])
let initData = () => {
  proxy
    .$post(
      `/Assets/v1.0/Bonus/Flow`,{...bonusForm}
    )
    .then(({ data }) => {
      nextTick(() => {
        bonus.push(...data.data.bonus);
        console.log(bonus, 'bonus');
        bonusForm.pageIndex++
      })

    });
}
onActivated(() => {
  initData()
});
</script>
<style scoped lang="scss">
:deep(.van-progress) {
  border-radius: 7.5px !important;
}

:deep(.van-progress__portion) {
  background: rgb(0, 144, 109) !important;
  border-radius: 7.5px !important;
}

header {
  width: 100%;
  height: 45px;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    height: 28px;
    width: 28px;
    @include flex(row, center, center);

    img {
      width: 100%;
      height: 100%;
    }
  }
}

main {
  padding: 65px 20px 20px;
  width: 100vw;
  height: 100vh;
  background-color: rgb(26, 26, 26);
  @include flex(column, flex-start, center);

  .nodata {
    width: 100%;
    height: 300px;

    img {
      width: 165px;
    }

    @include flex(column, center, center);

    p {
      font-size: 17px;
      color: #b5bac8;
      margin-top: 20px;
    }
  }

  dl {
    width: 100%;
    overflow: auto;
    flex: 1;

    dd {
      width: 100%;
      border: 1px solid #4a4c53;
      border-radius: 14px;
      padding: 12px 20px;
      margin-bottom: 20px;
      background-image: linear-gradient(#1c1e22, #1c1e22),
        linear-gradient(#fff, #fff);

      h3 {
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #fff;
      }

      strong {
        color: #fff;
        display: block;
      }

      >span {
        color: #fff;
        display: block;
        margin: 8px 0 14px 0;
      }

      p {
        width: 100%;
        height: 15px;
        border-radius: 7.5px;
        background-color: #fff;
      }

      >div {
        width: 100%;
        margin-top: 8px;
        @include flex(row, space-between, center);

        i {
          font-style: normal;
          font-size: 16px;
          color: #999;
        }

        span {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
</style>
